<template>
  <section class="_m-2">
    <div class="title d-flex justify-content-between">
      <h3>互动</h3>
      <router-link tag="h3" :to="'/books/discuss/'+booksId+'/edit'" class="edit">
        <i class="iconfont icon-edit"></i> 写评价
      </router-link>
    </div>
    <div class="discuss border-bottom">
      <div class="discuss-grade border-bottom d-flex align-items-center justify-content-center">
        <div class="item flex-1 text-center border-right">
          <h1>{{discussMap.avgStar == 0 ? '-' : discussMap.avgStar}}</h1>
          <p>书籍评分</p>
        </div>
        <div class="item flex-1 text-center border-right">
          <h1>{{discussMap.discussTotal == 0 ? '-' : discussMap.discussTotal}}</h1>
          <p>累计评论</p>
        </div>
        <div class="item flex-1 text-center">
          <h1>{{discussMap.star == 0 ? '-' : discussMap.star}}</h1>
          <p>人气值</p>
        </div>
      </div>

      <div class="discuss-list">
        <cube-slide
          ref="slide"
          :data="discussList"
          :loop="true"
          :auto-play="true"
          :interval="3000"
          :showDots="false"
          direction="vertical"
        >
          <cube-slide-item v-for="(item, index) in discussList" :key="index">
            <div
              class="d-flex discuss-list-ul"
            >
              <div class="avator">
                <img :src="item.usersVo.avator" alt="头像" v-if="item.usersVo.avator != null"/>
                <img src="~assets/img/head.png" alt="头像" v-else/>
              </div>
              <div class="info">
                <h2>{{item.usersVo.nickName}}</h2>
                <p>{{item.discussContent}}</p>
              </div>
            </div>
          </cube-slide-item>
        </cube-slide>
      </div>
    </div>
    <router-link tag="div" :to="'/books/discuss/'+booksId+'/list'" class="discuss-more text-center">全部评论</router-link>
  </section>
</template>

<script>
import {findTotalsByBookId, getDiscussList} from 'api/DiscussApi'
import axios from 'axios'

export default {
  name: "SectionDiscuss",
  props: {
    booksId: String
  },
  data() {
    return {
      discussList: [],
      discussMap: {}
    };
  },
  methods: {
    findTotalsByBookId () {
      return findTotalsByBookId({
        bookId: this.booksId
      });
    },
    findDiscussList() {
      return getDiscussList({
        bookId: this.booksId,
        pageSize: 5
      })
    },
    findAll () {
      axios.all([
        this.findTotalsByBookId(),
        this.findDiscussList()
        ]).then(axios.spread((totalRes, listRes) => {
          if(totalRes.meta.success) {
            this.discussMap = totalRes.data
          }
          if(listRes.meta.success) {
            this.discussList = listRes.data.datas
          }
        }));
    }
  },
  created() {
    //获取评分 累计评论 人气值 部分评论
    this.findAll()
  }
};
</script>

<style lang="stylus" scoped>
@import '~assets/css/style.styl';

section {
  background: #FFF;

  .title {
    height: 34px;
    font-size: 14px;
    line-height: 34px;

    h3 {
      padding-left: 2vw;
      padding-right: 2vw;
      position: relative;

      i {
        font-size: 12px !important;
        margin-right: 4px;
      }

      &:nth-child(1):after {
        content: '';
        width: 3px;
        height: 14px;
        display: inline-block;
        background: $colorPrimary;
        position: absolute;
        top: 10px;
        left: 0px;
        border-radius: 3px;
      }

      &.edit {
        color: $colorPrimary;
      }
    }
  }

  .discuss {
    padding: 10px;

    .discuss-list {
      padding: 15px 10px 10px;
    }

    .discuss-grade, .discuss-list {
      height: 80px;
      overflow: hidden;

      .item {
        font-size: 20px;
        color: #333;

        p {
          margin-top: 4px;
          font-size: 14px;
        }
      }

      .discuss-list-ul {
        .avator {
          margin-right: 10px;

          img {
            width: 25px;
            height: 25px;
            border-radius: 50%;
          }
        }

        .info {
          h2 {
            height: 25px;
            line-height: 20px;
            margin-bottom: 5px;
          }

          p {
            ellipsis2();
            font-size: 14px;
            line-height: 16px;
            margin-left: 0px;
          }
        }
      }
    }
  }

  .discuss-more {
    height: 40px;
    line-height: 40px;
  }
}
</style>
